<template>
  <el-row :class="tabType + '_conbox'">
    <div class="topTitle clearBoth"><span>{{$t('public.customer')}}</span><span class="fr">{{$t('public.agent')}}</span></div>
    <el-col :span="qualityCheck ? 24 : 16">
      <div class="chat_msg_box">
        <div class="chat_msg_con">
          <el-row>
            <el-col :span="24">
              <div class="chatMsgCon">
                <div class="chat_msg chat_msg1 font14">
                  <div class="msg_inner msg_inner1">
                    <div class="history_liading" v-show="!loadFlag">
                      <div class="history_liading_text">
                        <img src="../../webchat/img/loading.gif" alt=""><span>{{$t('webchat.loading')}}</span>
                      </div>
                    </div>
                    <!--获取当前会话-->
                    <div class="chatUserMsg" id="chat-user-msg">
                      <div v-for="(chatMsg, index) in contectHistoryList" :key="index" class="msg_li clearBoth">
                      
                        <div class="chat_item in clearBoth" v-if="chatMsg.role === 'visitor'">
                          <div v-if="flag">
                            <div class="chat_user_info">
                                <div class="chat_time">    
                                  <span v-if="(moodTestRole==2 ||moodTestRole==3) && chatMsg.emotion > 7" style="margin-right: 5px;color:red">{{$t('intelligentQualityCheck.intelEmotionAbnormality')}}</span>
                                  <span v-if="(moodTestRole==2 ||moodTestRole==3) && chatMsg.emotion <= 7" style="margin-right: 5px">{{$t('intelligentQualityCheck.intelEmotionNormal')}}</span>
                                  <span style="margin-right: 5px" v-if="(moodTestRole==2 ||moodTestRole==3)">{{speechRate(chatMsg)}}</span>
                                  {{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content do_search" :style="(chatMsg.isExistFocusWords && chatMsg.role === 'visitor')?'background-color:#'+ chatMsg.backgroundColor:''">
                              <div class="chat_content_arrow"  :style="(chatMsg.isExistFocusWords&&chatMsg.role === 'visitor')?'border: 5px solid #'+ chatMsg.backgroundColor+';border-color: #'+chatMsg.backgroundColor+' transparent transparent #'+ chatMsg.backgroundColor+'; :'+ '':''"></div>
                              <div class="chat_message_con">
                                <div class="chat_message_con_text" v-html="chatMsg.text"></div>
                              </div>
                              <!--<span class="img_action_kmsearch iconfont icon-sousuo" @click.stop="openPopSearch(true,$event)"></span>-->
                            </div>
                          </div>
                          <div v-else>
                            <div v-if="chatMsg.contentType === 'text'" class="chat_text_con">
                                <!-- <div class="chat_time">{{chatTime(chatMsg)}}</div> -->
                              <div class="chat_user_info">
                                <div class="chat_time">    
                                  <span v-if="(moodTestRole==2 ||moodTestRole==3) && chatMsg.emotion > 7" style="margin-right: 5px;color:red">{{$t('intelligentQualityCheck.intelEmotionAbnormality')}}</span>
                                  <span v-if="(moodTestRole==2 ||moodTestRole==3) && chatMsg.emotion <= 7" style="margin-right: 5px">{{$t('intelligentQualityCheck.intelEmotionNormal')}}</span>
                                  <span style="margin-right: 5px" v-if="(moodTestRole==2 ||moodTestRole==3)">{{speechRate(chatMsg)}}</span>
                                  {{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content do_search" :style="(chatMsg.isExistFocusWords && chatMsg.role === 'visitor')?'background-color:#'+ chatMsg.backgroundColor:''">
                                <div class="chat_content_arrow"  :style="(chatMsg.isExistFocusWords&&chatMsg.role === 'visitor')?'border: 5px solid #'+ chatMsg.backgroundColor+';border-color: #'+chatMsg.backgroundColor+' transparent transparent #'+ chatMsg.backgroundColor+'; :'+ '':''"></div>
                                <div class="chat_message_con">
                                  <div class="chat_message_con_text" v-html="chatMsg.text"></div>
                                </div>
                              </div>
                            </div>
                            <div v-if="chatMsg.contentType === 'image'">
                              <div class="chat_user_info">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content image">
                                <div class="chat_content_arrow"></div>
                                <img class="chat_img" :src="chatMsg.text + '?imageView2/2/w/10000'" @click.stop="showBigImage(chatMsg.text)"/>
                              </div>
                            </div>
                            <div v-if="chatMsg.contentType === 'file' && !chatMsg.mp3Suffix">
                              <div class="chat_user_info">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content do_search" >
                                <div class="chat_content_arrow"></div>
                                <!-- 文件的url路径未知 -->
                                <a :href="chatMsg.text" target="_blank">{{chatMsg.fileName}}</a>
                              </div>
                            </div>
                            <div v-if="chatMsg.contentType === 'voice' || (chatMsg.contentType === 'file' && chatMsg.mp3Suffix)">
                              <div class="chat_text_con clearBoth" >
                                <div class="chat_user_info">
                                  <div class="chat_time">{{chatTime(chatMsg)}}</div>
                                </div>
                                <div class="chat_content voice_content" @click.stop="changeVoicePlay(chatMsg, 'user')">
                                  <div class="chat_content_arrow"></div>
                                  <div class="chat_message_con">
                                    <webchat-chat-voice :chatMsg="chatMsg" :chatFlag="'user'"></webchat-chat-voice>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-if="chatMsg.contentType === 'video'">
                              <!--TODO：视频气泡-->
                              <div class="chat_user_info">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content">
                                <div class="chat_content_arrow"></div>
                                <div class="chat_message_con" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}">
                                  <i class="iconfont icon-shipin cursorPointer" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}"></i>
                                  <span>{{VideoDesc(chatMsg.videoStatus)}}</span>
                                  <span v-if="chatMsg.videoStatus === 'Hangup' || chatMsg.videoStatus === 'hangup'">{{videoTimeCom(chatMsg.text)}}</span>
                                </div>
                              </div>
                            </div>
                            <!-- 屏幕分享 -->
                            <div v-if="chatMsg.contentType === 'screenShare'">
                              <div class="chat_user_info">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content">
                                <div class="chat_content_arrow"></div>
                                <div class="chat_message_con" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}">
                                  <i class="iconfont icon-zhuomianfenxiang cursorpointer" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}"></i>
                                  <span>{{screenShareDesc(chatMsg.screenShareStatus)}}</span>
                                  <span v-if="chatMsg.screenShareStatus === 'agentFinish'">{{videoTimeCom(chatMsg.duration)}}</span>
                                </div>
                              </div>
                            </div>
                            <div v-if="chatMsg.contentType === 'wechatvideo'">
                              <div class="chat_user_info">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content">
                                <div class="chat_content_arrow"></div>
                                <div class="chat_message_con wechat_video">
                                  <a :href="chatMsg.text" target="_blank">
                                    <div class="wechat_video_play_icon">
                                      <div class="play_icon"></div>
                                    </div>
                                    <img v-if="chatMsg.thunmbnail" class="wecbat_video_thunmbnail" :src="chatMsg.thunmbnail">
                                    <div v-else class="wecbat_video_thunmbnail_no">
                                      <div class="thunmbnail_no_icom"></div>
                                    </div>
                                  </a>
                                </div>
                              </div>
                            </div>
                            <div v-if="chatMsg.contentType === 'link'">
                              <div class="chat_user_info">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content do_search" >
                                <div class="chat_content_arrow"></div>
                                <a class="link_title" :href="chatMsg.text" target="_blank">{{chatMsg.linkTitle}}</a>
                                <div class="link_description">{{chatMsg.linkDescription}}</div>
                              </div>
                            </div>
                            <div v-if="chatMsg.contentType === 'cardInfo'">
                              <div class="chat_user_info">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content voice_content" >
                                <div class="chat_content_arrow_out"></div>
                                <div class="chat_message_con">
                                  <div class="m7GoodsInfo">
                                    <div class="goodInfoLeft" v-if="chatMsg.cardInfo.left && chatMsg.cardInfo.left.url">
                                      <img :src="decodeURIComponent(chatMsg.cardInfo.left.url)">
                                    </div>
                                    <div class="goodInfoRight" :style="{width: chatMsg.cardInfo.left && chatMsg.cardInfo.left.url ? 'calc(100% - 70px)' : '100%'}">
                                      <span class="goodInfoRight1" v-if="chatMsg.cardInfo.right1 && chatMsg.cardInfo.right1.text">{{chatMsg.cardInfo.right1.text}}</span>
                                      <span class="goodInfoRight2" v-if="chatMsg.cardInfo.right2 && chatMsg.cardInfo.right2.text">{{chatMsg.cardInfo.right2.text}}</span>
                                      <span class="goodInfoRight3" v-if="chatMsg.cardInfo.right3 && chatMsg.cardInfo.right3.text">{{chatMsg.cardInfo.right3.text}}</span>
                                      <span class="MoreGoodsInfo" v-if="chatMsg.cardInfo.extraInfos && chatMsg.cardInfo.extraInfos.length > 0" v-html="showExtraInfoMap[chatMsg._id] ? '收起' : '更多'" @click.stop="showExtraInfo(chatMsg)"></span>
                                      <span v-if="chatMsg.cardInfo.extraInfos && chatMsg.cardInfo.extraInfos.length > 0 && showExtraInfoMap[chatMsg._id]" v-for="moreInfo in chatMsg.cardInfo.extraInfos">{{moreInfo}}</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="chat_item out clearBoth"  v-if=" chatMsg.role === 'agent' && chatMsg.type !== 'imcsr'">
                          <div v-if="flag">
                            <div class="chat_content">
                              <div class="chat_content_arrow_out"></div>
                              <div class="chat_user_info_out clearBoth">
                                <div class="chat_time"><span v-if="(moodTestRole==1 ||moodTestRole==3)&&chatMsg.emotion > 7" style="margin-right: 5px;color:red">{{$t('intelligentQualityCheck.intelEmotionAbnormality')}}</span>
                                  <span v-if="(moodTestRole==1 ||moodTestRole==3)&&chatMsg.emotion <= 7" style="margin-right: 5px">{{$t('intelligentQualityCheck.intelEmotionNormal')}}</span>
                                  <span style="margin-right: 5px" v-if="(moodTestRole==1 ||moodTestRole==3)">{{speechRate(chatMsg)}}</span>{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content_text" v-html="chatMsg.text"></div>
                            </div>
                          </div>
                          <div v-else>
                            <template v-if="chatMsg.contentType === 'text'">
                              <div class="chat_content">
                                <div class="chat_content_arrow_out"></div>
                                <div class="chat_user_info_out clearBoth">
                                  <div class="chat_time">
                                    <span v-if="chatMsg.user === 'robot' || chatMsg.user === 'system'">
                                    </span>
                                    <span v-else>
                                      <span v-if="(moodTestRole==1 ||moodTestRole==3)&&chatMsg.emotion === -1" style="margin-right: 5px;color:red">{{$t('intelligentQualityCheck.intelEmotionAbnormality')}}</span>
                                      <span v-if="(moodTestRole==1 ||moodTestRole==3)&&chatMsg.emotion!== -1" style="margin-right: 5px">{{$t('intelligentQualityCheck.intelEmotionNormal')}}</span>
                                    </span>
                                    {{chatTime(chatMsg)}}
                                  </div>
                                </div>
                                <div class="chat_content_text" v-html="chatMsg.text"></div>
                              </div>
                            </template>
                            <template v-if="chatMsg.contentType === 'image'">
                              <div class="chat_content image">
                                <div class="chat_content_arrow_out"></div>
                                <img class="chat_img" :src="chatMsg.text + '?imageView2/2/w/10000'" @click.stop="showBigImage(chatMsg.text)"/>
                              </div>
                              <div class="chat_user_info_out clearBoth">
                                <span v-if="chatMsg.user === 'robot' || chatMsg.user === 'system'">
                                </span>
                                <div v-else>
                                  <span v-show="moodTestRole&&(moodTestRole==1 ||moodTestRole==3)&&chatMsg.emotion === '-1'">{{$t('intelligentQualityCheck.intelEmotionAbnormality')}}</span>
                                  <span v-show="moodTestRole&&(moodTestRole==1 ||moodTestRole==3)&&chatMsg.emotion === '0'">{{$t('intelligentQualityCheck.intelEmotionNormal')}}</span>
                                </div>
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                            </template>
                            <template v-if="chatMsg.contentType === 'file' && !chatMsg.mp3Suffix">
                              <div class="chat_content">
                                <div class="chat_content_arrow_out"></div>
                                <!-- 文件的url路径未知 -->
                                <a :href="chatMsg.text" target="_blank">{{chatMsg.fileName}}</a>
                              </div>
                              <div class="chat_user_info_out clearBoth">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                            </template>
                            <template v-if="chatMsg.contentType === 'iframe'">
                              <div class="chat_content">
                                <div class="chat_content_arrow_out"></div>
                                <div style="max-width: 100%;max-height: 300px;overflow: auto">
                                  <iframe :src="chatMsg.text" frameborder="0" :width="chatMsg.iframeWidth" :height="chatMsg.iframeHeight"></iframe>
                                </div>
                              </div>
                              <div class="chat_user_info_out clearBoth">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                            </template>
                            <template v-if="chatMsg.contentType === 'video'">
                              <!--TODO：视频气泡-->
                              <div class="chat_content">
                                <div class="chat_content_arrow_out"></div>
                                <div class="chat_message_con" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}">
                                  <i class="iconfont icon-shipin cursorPointer" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}"></i>
                                  <span>{{VideoDesc(chatMsg.videoStatus)}}</span>
                                  <span v-if="chatMsg.videoStatus === 'Hangup' || chatMsg.videoStatus === 'hangup'">{{videoTimeCom(chatMsg.text)}}</span>
                                </div>
                              </div>
                              <div class="chat_user_info_out clearBoth">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                            </template>
                            <template v-if="chatMsg.contentType === 'screenShare'">
                              <!--屏幕共享-->
                              <div class="chat_content">
                                <div class="chat_content_arrow_out"></div>
                                <div class="chat_message_con" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}">
                                  <i class="iconfont icon-zhuomianfenxiang cursorpointer" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}"></i>
                                  <span>{{screenShareDesc(chatMsg.screenShareStatus)}}</span>
                                  <span v-if="chatMsg.screenShareStatus === 'agentFinish'">{{videoTimeCom(chatMsg.duration)}}</span>
                                </div>
                              </div>
                              <div class="chat_user_info_out clearBoth">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                            </template>
                            <template v-if="chatMsg.contentType === 'voice' || (chatMsg.contentType === 'file' && chatMsg.mp3Suffix)">
                              <div class="chat_content voice_content" @click.stop="changeVoicePlay(chatMsg, 'user')">
                                <!--<div class="voice_content_cover" @click="playVoice($event)"></div>-->
                                <div class="chat_content_arrow_out"></div>
                                <div class="chat_message_con">
                                  <webchat-chat-voice :chatMsg="chatMsg" :chatFlag="'user'"></webchat-chat-voice>
                                </div>
                              </div>
                              <div class="chat_user_info_out clearBoth">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                            </template>
                            <!--富文本链接-->
                            <template v-if="chatMsg.contentType === 'richText'">
                              <div class="chat_content">
                                <div class="chat_content_arrow_out"></div>
                                <div class="chat_msg_richText" @click.stop="openNewRichText(chatMsg.richTextUrl)">
                                  <p class="richTextTitle">{{chatMsg.richTextTitle}}</p>
                                  <div class="chat_msg_richText_bottom">
                                    <p class="richTextDescription" :style="{width: chatMsg.richTextPicUrl ? '140px' : ''}">{{chatMsg.richTextDescription}}</p>
                                    <img v-if="chatMsg.richTextPicUrl" :src="chatMsg.richTextPicUrl" class="richTextPicUrl">
                                  </div>
                                </div>
                              </div>
                              <div class="chat_user_info_out clearBoth">
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                            </template>
                            <!-- 微信小程序消息发送失败 -->
                            <el-tooltip :content="wechatErrorCode(chatMsg.wxminires)" placement="left">
                              <div v-if="chatMsg.type === 'out' && chatMsg.wxminires && chatMsg.platform === 'wxmini'" class="send_status failure iconfont icon-tishi"></div>
                            </el-tooltip>
                            <el-tooltip :content="dyErrorCode(chatMsg.sendRes)" placement="left">
                              <div v-if="chatMsg.type === 'out' && chatMsg.sendRes && chatMsg.platform === 'dy'" class="send_status failure iconfont icon-tishi"></div>
                            </el-tooltip>
                            <el-tooltip :content="wxkfErrorCode(chatMsg.sendRes)" placement="left">
                              <div v-if="chatMsg.type === 'out' && chatMsg.sendRes && chatMsg.platform === 'wxkf'" class="send_status failure iconfont icon-tishi"></div>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="chat_item system clearBoth"  v-if=" chatMsg.type == 'system'">
                          <div class="chat_content" v-html="chatMsg.text"></div>
                        </div>
                        <div class="chat_item system clearBoth" v-if=" chatMsg.type == 'imcsr'">
                          <div class="chat_content" v-html="chatMsg.text"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <big-image :imgInfo="bigImage" @closeImageDialog="closeBigImage"></big-image>
    </el-col>
  </el-row>
</template>
<script type="text/javascript">
  import CustomerAvatar from '../../../ui-modules/customer-avatar/CustomerAvatar'
  import { getCache, deepClone } from '@/utils/m7Utils'
  import * as types from '@/store/mutation-types.js'
  import BigImage from '@/components/public-modules/bigImage/BigImage'
  import PopDragSearch from '@/components/public-modules/popups/PopDragSearch'
  import webChatTimeLine from '../../../ui-modules/timeLine/webChatTimeLine'
  import WebchatChatVoice from '../../webchat/WebchatChatVoice'
  export default {
    name: 'qualityCheckWebchatview',
    props: {
      chatInformationId: String,
      showFlag: {
        type: Boolean,
        default: false
      },
      qualityCheck: {
        type: Boolean,
        default: false
      },
      sessionId: {
        type: String,
        default: ''
      },
      historyList: {
        type: Array,
        default: function () {
          return []
        }
      },
      ruleResults: {
        type: Array,
        default: function () {
          return []
        }
      },
      flag: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      firstRuleId: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    data () {
      return {
        status: '',
        displayName: {
          user: {},
          row: {}
        },
        chatInformation: {},
        contectHistoryList: [],
        contectRuleResults: [],
        tabType: '',
        customerId: '',
        webchatData: {},
        visitInfoList: [],
        bigImage: {
          bigImageShow: false,
          url: ''
        },
        iconFont: '',
        remarkClone: '',
        webchatDataClone: {},
        ubaInfoList: [],
        investigate: false,
        baseInfo: true,
        trackInfo: true,
        visitInfo: false,
        currentPage: 1,
        finishChatScroll: false,
        loadFlag: true,   // 加载联系历史的时候
        page: 1,
        ubaSessionId: '', // ubaSessionId 用来确定唯一的用户浏览轨迹
        loading: false,
        lastNum: 0,
        osInfo: '', // 操作系统
        browserName: '',
        dialogueTimes: '',
        inviteTimes: '',
        accessName: '',  // 平台名称
        moodTestRole:0
      }
    },
    methods: {
      wechatErrorCode (errcode) { // 小程序客服错误码
        let errorMsg = ''
        if (errcode) {
          errorMsg = 'webchat.errorCode.errcode_' + errcode
          return this.$t(errorMsg)
        } else {
          return ''
        }
      },
      dyErrorCode (errcode) { // 抖音客服错误码
        let errorMsg = ''
        if (errcode) {
          errorMsg = 'webchat.dyErrorCode.dyerrcode_' + errcode
          return this.$t(errorMsg)
        } else {
          return ''
        }
      },
      wxkfErrorCode (errcode) { // 抖音客服错误码
        let errorMsg = ''
        if (errcode) {
          errorMsg = 'webchat.wxkfErrorCode.wxkferrcode_' + errcode
          return this.$t(errorMsg)
        } else {
          return ''
        }
      },
      openNewRichText (url) {
        if (url) {
          window.open(url)
        }
      },
      screenShareDesc (data) {
        if (data === 'agentCancel') {
          return this.$t('screenShare.shareHasBeenCancel')
        } else if (data === 'custRefuse') {
          return this.$t('screenShare.shareNotBeAnswer')
        } else if (data === 'agentFinish') {
          return this.$t('screenShare.shareTimeLength')
        } else {
          return this.$t('screenShare.shareHasBeenCancel')
        }
      },
      VideoDesc (data) {
        if (data === 'cancel') {
          return this.$t('videoChat.videoHasBeenCancel')
        } else if (data === 'refuse') {
          return this.$t('videoChat.videoNotBeAnswer')
        } else if (data === 'Hangup' || data === 'hangup') {
          return this.$t('videoChat.videoTimeLength')
        } else {
          return this.$t('videoChat.videoHasBeenCancel')
        }
      },
      videoTimeCom (time) {
        var hours = Math.floor(time / (3600 * 1000))
        var hoursleft = time % (3600 * 1000)
        var minutes = Math.floor(hoursleft / (60 * 1000))
        var minutesleft = hoursleft % (60 * 1000)
        var seconds = Math.floor(minutesleft / 1000)
        if (seconds === 60) {
          minutes = minutes + 1
          seconds = 0
        }
        if (minutes === 60) {
          hours = hours + 1
          minutes = 0
        }
        var h = hours > 9 ? hours : '0' + hours
        var m = minutes > 9 ? minutes : '0' + minutes
        var s = seconds > 9 ? seconds : '0' + seconds
        return h + ':' + m + ':' + s
      },
      // 此处不支持滚动加载消息历史方法  qyg
      // getChatHistoryScroll (event) {
      //   let height = document.getElementsByClassName('msg_inner1')[0].scrollHeight
      //   if (event.target.scrollTop < 1 && !this.finishChatScroll && this.loadFlag) {
      //     this.loadFlag = false
      //     this.$store.dispatch('queryUserContactHistory', {page: ++this.page, sessionId: this.chatInformationId, limit: 10}).then((resp) => {
      //       this.loadFlag = true
      //       if (resp.list.length) {
      //         this.contectHistoryList = (resp.list).concat(this.contectHistoryList)
      //         event.target.scrollTop = height - this.lastNum
      //         this.lastNum = height
      //       } else {
      //         this.finishChatScroll = true
      //       }
      //     })
      //   }
      // },
      trim (data) {
        let _str = data
        return _str.replace(/(^\s*)|(\s*$)/g, '')
      },
//      编辑备注
      editRemark (event) {
        if (this.remarkClone !== event.target.value) {
          let remark = {
            accessId: this.webchatData.accessId,
            sid: this.webchatData.sid,
            _id: this.webchatData._id,
            content: event.target.value
          }
          this.$store.dispatch('updateWebchatSessionRemark', remark).then(() => {
            this.remarkClone = event.target.value
//            this.displayName.user.remark = event.target.value
          })
        }
      },
      scrollToBottom (scrollClassName, warpClassName) {
        this.$nextTick(function () {
          if (document.getElementsByClassName(warpClassName).length) {
            document.getElementsByClassName(scrollClassName)[0].scrollTop = document.getElementsByClassName(warpClassName)[0].scrollHeight
          }
        })
      },
      closeBigImage () {
        this.bigImage.bigImageShow = false
        this.bigImage.url = ''
      },
      showBigImage (data) {
        let msg = {
          show: true,
          url: data
        }
        this.$store.commit(types.SET_OLD_BIGIMG, msg)
      },
      changeChatMsgScroll () {
        this.$nextTick(function () {
          this.scrollToBottom('chat_msg1', 'msg_inner1')
        })
      },
//      获取座席头像
      im_icon (obj) {
        let data = ''
        if (obj.im_icon) {
          data = obj.im_icon + '?imageView2/1/w/50/h/50'
        } else {
          if (obj.user && obj.user !== 'system' && obj.user !== 'robot') {
            let agent = getCache('agents', obj.user)
            if (agent.im_icon) {
              data = agent.im_icon + '?imageView2/1/w/50/h/50'
            } else {
              data = ''
            }
          } else if (obj.user === 'robot') {
            data = 'robot'
          }
        }
        return data
      },
      investigateShow (flag) {
        if (flag) {
          this.investigate = true
        } else {
          this.investigate = false
        }
      },
//     格式化时间
      chatTime (item) {
        let timeNew = ''
        if (this.flag) {
          timeNew = '第' + (item.beginTime / 1000).toFixed(1) + '秒'
        } else {
          timeNew = item.date
        }
        return timeNew
      },
      speechRate (item) {
        if (this.flag) {
          let speechRateNew = '语速' + item.speechRate
          return speechRateNew
        }
      },
//      语音播放
      changeVoicePlay (chatMsg, flag) {
        if (chatMsg.play) {
          this.$set(chatMsg, 'play', false)
        } else {
          let self = this
          this.contectHistoryList.forEach(function (item, index) {
            if (item.contentType === 'voice') {
              self.$set(item, 'play', false)
            }
          })
          this.$set(chatMsg, 'play', !chatMsg.play)
        }
      },
      timeScroll (event) { // 滚动加载更多浏览轨迹 需要
        let nScrollHight = 0
        let nScrollTop = 0
        let nDivHight = event.target.offsetHeight
        nScrollHight = event.target.scrollHeight
        nScrollTop = event.target.scrollTop
        if (nScrollTop + nDivHight + 2 >= nScrollHight) { // 解决不同分辨率下scrollTop的差异
          this.currentPage += 1
          this.$store.dispatch('loadUbaInfo', {_id: '', ubaSessionId: this.chatInformation.ubaInfo.ubaSessionId, ubaPageId: this.chatInformation.ubaInfo.ubaPageId, ubaHistory: true, currentPage: this.currentPage}).then((sessionId) => {
            if (sessionId) {
              this.ubaSessionId = sessionId
              this.ubaInfoList = this.$store.state.webchat.ubaInfoList[sessionId]
            }
          })
        }
      },
      //      按规则标红关键字
      markRed (val) {
        let paneWrap = document.getElementById('chat-user-msg')
        let spans = paneWrap.getElementsByTagName('span')
        for (let n=0;n < spans.length;n++) {
          if(paneWrap.getElementsByTagName('span')[n].style.color!=='red'){
            paneWrap.getElementsByTagName('span')[n].style.color = '#000'
          }
        }
        let paneWrapItem = paneWrap.getElementsByClassName(val)
        for (let i=0;i < paneWrapItem.length;i++) {
          paneWrap.getElementsByClassName(val)[i].style.color = 'red'
        }
      }
    },
    watch: {
      chatInformationId () {
        this.finishChatScroll = false
        this.loadFlag = true
        this.page = 1
        this.contectHistoryList = deepClone(this.historyList)
        this.contectHistoryList.forEach(function (item, index) {
          if (item.text.indexOf('&lt;7moorbr/&gt;') > -1 || item.text.indexOf('<7moorbr/>') > -1) {
            item.text = item.text.replace(/<7moorbr\/>/g, '<br />')
            item.text = item.text.replace(/&lt;7moorbr\/&gt;/g, '<br />')
          }
        })
      },
      historyList () {
        this.contectHistoryList = deepClone(this.historyList)
        this.contectHistoryList.forEach(function (item, index) {
          if (item.text.indexOf('&lt;7moorbr/&gt;') > -1 || item.text.indexOf('<7moorbr/>') > -1) {
            item.text = item.text.replace(/<7moorbr\/>/g, '<br />')
            item.text = item.text.replace(/&lt;7moorbr\/&gt;/g, '<br />')
          }
        })
        this.$nextTick(() => {
          this.markRed(this.firstRuleId)
        })
      },
      ruleResults () {
        let _self = this
        this.contectRuleResults = deepClone(this.ruleResults)
        _self.moodTestRole=0
        if(this.contectRuleResults.length>1){
          if(this.contectRuleResults.some(item =>item.moodTestRole && item.moodTestRole === 1)  && this.contectRuleResults.some(item =>item.moodTestRole&& item.moodTestRole === 2)) {
              _self.moodTestRole = 3
          }else  if(this.contectRuleResults.some(item =>item.moodTestRole && item.moodTestRole === 2)  && this.contectRuleResults.some(item =>item.moodTestRole&& item.moodTestRole === 3)) {
              _self.moodTestRole = 3
          }else  if(this.contectRuleResults.some(item =>item.moodTestRole && item.moodTestRole === 2)  && this.contectRuleResults.some(item =>item.moodTestRole&& item.moodTestRole === 3)) {
              _self.moodTestRole = 3
          }else{
            this.contectRuleResults.forEach(function (item, index) {
              if(item.moodTestRole){
                _self.moodTestRole = item.moodTestRole
              }
            })
          }
        }else{
          this.contectRuleResults.forEach(function (item, index) {
            if(item.moodTestRole){
              _self.moodTestRole = item.moodTestRole
            }
          })
        }
        }
    },
    mounted () {
      let _self = this
      this.contectHistoryList = deepClone(this.historyList)
      this.contectRuleResults = deepClone(this.ruleResults)
      this.contectHistoryList.forEach(function (item, index) {
        if (item.text.indexOf('&lt;7moorbr/&gt;') > -1 || item.text.indexOf('<7moorbr/>') > -1) {
          item.text = item.text.replace(/<7moorbr\/>/g, '<br />')
          item.text = item.text.replace(/&lt;7moorbr\/&gt;/g, '<br />')
        }
      })
      if(this.contectRuleResults.length>1){
        if(this.contectRuleResults.some(item =>item.moodTestRole && item.moodTestRole === 1)  && this.contectRuleResults.some(item =>item.moodTestRole&& item.moodTestRole === 2)) {
            _self.moodTestRole = 3
        }else if(this.contectRuleResults.some(item =>item.moodTestRole && item.moodTestRole === 2)  && this.contectRuleResults.some(item =>item.moodTestRole&& item.moodTestRole === 3)) {
            _self.moodTestRole = 3
        }else if(this.contectRuleResults.some(item =>item.moodTestRole && item.moodTestRole === 2)  && this.contectRuleResults.some(item =>item.moodTestRole&& item.moodTestRole === 3)) {
            _self.moodTestRole = 3
        }else{
          this.contectRuleResults.forEach(function (item, index) {
            if(item.moodTestRole){
              _self.moodTestRole = item.moodTestRole
            }
          })
        }
      }else{
        this.contectRuleResults.forEach(function (item, index) {
          if(item.moodTestRole){
            _self.moodTestRole = item.moodTestRole
          }
        })
      }
      this.$nextTick(() => {
        this.markRed(this.firstRuleId)
      })
 
    },
    components: {
      CustomerAvatar,
      BigImage,
      WebchatChatVoice,
      PopDragSearch,
      webChatTimeLine
    },
    beforeMount () {
      this.loading = false
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .agentName
    padding-left 10px
  .chat_info_box
    overflow hidden
    margin-top 38px
  .chat_info_box .chat_info_label
    display inline-block
  .active
    background $c-card
  .chat_top
    position relative
    box-sizing border-box
  .chat_top_head
    float left
    height 40px
    max-width 100%
    box-sizing border-box
    position relative
    line-height 44px
  .chat_transfer
    float right
  .avatar
    position absolute
    left 0
  .topTitle
    background-color: #f0f0f0
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    font-size 14px
  .title
    margin-left 14px
  .dic_item
    textarea
      color $cf-gray0
      border-color $cf-level2
      width 100%
      padding 6px
      box-sizing border-box
      border-radius 4px
    textarea:focus
      border-color $c-main
  .chat_transfer
    .iconfont
      cursor pointer
      font-size 20px
      margin 5px 6px 0
      line-height 30px
      color $cf-gray5
    .icon-tuichu
      margin-right 10px
  .chatMsgCon
    border 1px solid $c-border1
  .chat_msg
    padding 14px
    box-sizing border-box
    overflow auto
    height calc( 100vh - 320px)
  .webchat_todo_conbox
    .chat_msg
      height calc( 100vh - 334px)
  .webchat_laterProcess_conbox
    .chat_msg
      height calc( 100vh - 328px + 121px + 112px)
  .webchat_all_conbox
    .chat_msg
      height calc( 100vh - 328px + 121px)
  .chat_item
    position relative
    max-width 70%
  .chat_user_info
    position absolute
    left 0
    top 0
    .chat_time
      position absolute
      white-space nowrap
      font-size 12px
      color $cf-gray4
      top -16px
      left 0px
  .chat_user_img
    border-radius 50%
    width 40px
    height 40px
    overflow hidden
    background url("../../../public-modules/contact-summary/img/agent.png") no-repeat 50% 50%
    background-size 32px auto
    img
      background $cf-white
      width 100%
  .robot
    background $c-border1
    .icon-jiqirentouxiang
      width 32px
      height 32px
      display block
      text-align center
      line-height 32px
      font-size 30px
  .chat_time
    color #9A9A9A
    width auto
    line-height 16px
    text-align center
  .chat_msg_richText
    cursor pointer
    width 200px
    min-height 60px
    padding 5px
    .richTextTitle
      width 200px
      font-size 14px
      display: -webkit-box;
      box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-decoration underline
    .chat_msg_richText_bottom
      width 200px
      margin-top 6px
      .richTextDescription
        display inline-block
        color: $c-log
      .richTextPicUrl
        display inline-block
        float right
        width 55px
        height 40px
  .chat_img
    max-width 100px
  .send_status
    position absolute
    width 26px
    height 26px
    border-radius 50%
    left -30px
    top 50%
    margin-top -13px
  .send_status.process
    background url('../../webchat/img/webchat_send.gif') no-repeat
    background-size 26px 26px
  .send_status.failure
    color $c-pink
    text-align center
    line-height 20px
    font-size 20px
    position absolute
    left -2.5em
    top 100%
    transform translateY(-50%)
    padding 13px
  .chat_content_text
    word-break break-all
    white-space normal
    p
      img
        max-width 100%
  .chatPreloadedMsg
    margin-bottom 20px
    .chat_content_arrow
      border 5px solid #1cd0e0
      border-color #1cd0e0 transparent transparent #1cd0e0
  .chat_user_info_out
    position absolute
    right 0
    top -2px
    .chat_time
      position absolute
      white-space nowrap
      font-size 12px
      color $cf-gray4
      right -11px
      top -16px
    img
      width 32px
      height 32px
  .chat_item.out
    float right
    .chat_user_img
      border-radius 50%
      width 32px
      height 32px
      float right
    .chat_content
      float right
      margin 0 5px 0 0
      color $cf-gray0
  .chat_item.system
    text-align center
    padding 0
    width 100%
    .chat_content
      display inline-block
      width auto
      height 26px
      border-radius: 13px
      text-align center
      padding 0 14px
      line-height 26px
      background $c-bus-back
      color $cf-gray0
  .chat_msg_con
    textarea
      resize none
  .el-form-item
    margin 0
  .replyMsg
    float right
    margin-right 12px
  .msg_do
    margin 0 10px 0
    float left
    color $cf-gray5
  .fontSize
    min-width 20px
  .fontSize
    li
      line-height 28px
  .upload
    display inline-block
    width 22px
  .blacklist_con
    resize none
  .other_msg
    padding-top 5px
    height 23px
    .iconfont
      font-size 18px
      cursor pointer
    .iconfont:hover
      color $c-main
    .icon-zhishikujiansuo
      font-size 20px
  .upload
    width 20px
  .chat_info
    position relative
    .chat_info_all,.chat_info_todo
      box-sizing border-box
    .chat_info_todo
      /*.chat_info_all*/
      overflow auto
      padding 0 5px 0px 10px
      box-sizing border-box
      height calc(100vh - 316px)
    .chat_auxiliary_info
      /*padding-bottom 10px*/
      line-height 18px
      h3 + .chat_auxiliary_box
        a
          color $c-main
  .chat_info_li_title,.chat_auxiliary_title,.chat_info_all i
    color $cf-gray3
    font-style normal
  .chat_info_li_con,.chat_auxiliary_from
    color $cf-level2
    float right
  .chat_info_li_remarks
    border none
    resize none
    font-size 12px
    box-sizing border-box
    width 100%
    margin-top 6px
    border-color $cf-gray5
    padding 6px
    border-radius 4px
  .chat_info_li_remarks:focus
    border-color $c-main
  .el-tree
    border none
  .color
    color #1f2d3d
      display none
      padding-left 18px
  .msg_li
    min-height 40px
    margin-bottom 25px
  .msg_li.system_li
    height 24px
    margin 10px 0 20px
    min-height 24px
  .font14
    font-size 14px
  .client_msg
    height 36px
  .wxend
    text-align center
    padding 5px
    display block
    z-index 10000
    color $cf-level2
  .chat_info,.chat_info_all
    h3
      color $cf-level3
    .chat_info_li
      margin-bottom 5px
      padding-right 4px
      box-sizing border-box
    .chat_info_li.chat_info_li_title
      display inline-block
    .chat_info_remark
      margin 8px 0 6px
  .chat_info_all
    h3
      padding-bottom 10px
  .chat_info_ul
    margin-bottom 10px
    li
      display block
    span
      float right
      display inline-block
      max-width 100%
      text-overflow ellipsis
      white-space nowrap
      overflow hidden
  .chat_info_time_data
    margin-top 20px
  .icon-tishi
    color $c-pink
  .chat_content.image
    img
      cursor pointer
      max-width 100px
  .chat_message_con_text
    word-break break-all
  .prompt
    text-align center
    color $cf-gray3
    font-size 12px
    padding 3px 0
  .chat_title
    margin-bottom 4px
    font-size 14px
    color $cf-gray0
    width 100%
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
  .chat_title_time
    margin-left 16px
    font-size 12px
    color $cf-gray4
  .webchat_el_form
    height 65px
  .investigate_box
    position relative
  .investigate_con
    position absolute
    bottom 0
    width 100%
    left 0
    background $cf-white
    box-shadow 0 0 8px #aaa
    padding 8px
    box-sizing border-box
    li
      margin-bottom 6px
    .investigate_content
      /*float none*/
      clear both
      display inline
      word-break break-all
      white-space normal
      span
        color $cf-level2
  .audio_img
    height 15px
    margin-right 15px
  .voice_content.chat_content
    position relative
    .chat_message_con
      cursor pointer
  .chat_info .titleInfo
    cursor pointer
    font-weight bold
    color $cf-gray2
    margin-bottom 6px
    .el-icon-minus,.el-icon-plus
      color $cf-level3
  .chat_item.in a
    color $cf-white
  .chat_item.out a
    color $cf-level1
  .investigate_con
    span
      /*float none*/
      clear both
    vertical-align bottom
  .el-dialog__wrapper
    z-index 30001 !important
  .VideoTips
    .el-dialog__body
      .tipsword
        text-align center
        font-size 16px
        margin 10px 0
      .tipsbutton
        text-align center
        padding-top 15px
    .el-dialog__header
      padding-bottom 20px
      border-bottom 1px solid #a1a1a1
      span
        color #a2a2a2
  .colorred
    color $c-prompt
  .chatUserMsg
    margin-top 15px
  .chat_item.in
    .chat_message_con
      min-height 1em
      min-width 0.5em
  .chat_auxiliary_box
    padding-right 4px
  .fade-enter-active,
  .fade-leave-active
    transition all 0.5s ease
  .fade-enter,
  .fade-leave-active
    opacity 0
  .send_chat_msg_title
    line-height 30px
    color $cf-gray1
  .time_line_warp
    max-height calc(100vh - 562px);
    overflow-y auto
    padding-bottom 10px
  .uba_page_stay
    font-size 12px
    position absolute
    left 25px
    top 15px
  .uba_time_warp
    display block
  .currentUrl_warp
    display block
    padding-left 5px
    word-break break-all
  .time_line_box
    display flex
  .webchat_chat_info
    textarea::-webkit-input-placeholder
    color $cf-gray5
    .chat_info_all_title
      font-weight bold
      font-size 14px
      color $cf-gray2
      height 35px
      line-height 35px
      box-sizing border-box
      padding 0 14px
      border-bottom 1px solid $c-border1
  .history_lichat_contentading
    text-align center
    .history_liading_text
      display inline-block
      span
        vertical-align super
  .wecbat_video_thunmbnail
    max-width 200px
  .wechat_video
    cursor pointer
    color $c-main
    position relative
    a
      display inline-block
      .wechat_video_play_icon
        position absolute
        width 100%
        height 100%
        .play_icon
          position absolute
          width 64px
          height 64px
          margin -32px 0 0 -32px
          top 50%
          left 50%
          background url('../../webchat/img/play_icon.png') no-repeat center 0
          z-index 2
  .chat_content
    padding 8px 12px
    position relative
    margin-left 10px
    border-radius 14px
    background #cce6ff
    display inline-block
    color $cf-gray0
  .chat_item.out
    .chat_content
      background #f0f0f0
      margin 0 5px 0 0
      color $cf-gray0
  .m7GoodsInfo
    max-width 355px;
    padding: 10px;
    margin: 0;
    vertical-align: top;
    .goodInfoLeft
      height: 50px;
      width: 50px;
      text-align: center;
      vertical-align: center;
      display: inline-block;
      margin-right 10px
      img
        max-width 50px
        max-height 50px
    .goodInfoRight
      display: inline-block;
      vertical-align: top;
      span
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
      .goodInfoRight1
        color: #000;
        font-size: 12px;
        text-decoration underline
      .goodInfoRight2
        font-size: 12px;
        color: #595959;
      .goodInfoRight3
        font-size: 14px;
        color: #ff6b6b;
      .MoreGoodsInfo
        text-align right
        text-decoration underline
        cursor: pointer
  .msg_inner
    min-height calc(100% + 20px)
</style>

